<script setup>
import { useUserStore } from '@/store/modules/user'
import { User, Lock } from '@element-plus/icons-vue'
import { getVerifyCodeImg } from '@/api/user'
import { sm4Encrypt } from '@/utils/sm4'

// 获取router变量
const vueRouter = useRouter()
// 获取store变量
const userStore = useUserStore()

const loginFormRef = ref()

// 定义表单对象
const loginFormModel = reactive({
  userName: '',
  password: '',
  code: '',
  uuid: '',
  codeUrl: '',
  loginButtonDisabled: false,
  loginButtonLoading: false,
  loginButtonName: '登录'
})
// 定义表单校验规则
const loginFormRules = reactive({
  userName: [{ required: true, message: '请输入用户名/手机号/邮箱/身份证！', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码！', trigger: 'blur' }],
  code: [{ required: true, message: '请输入验证码！', trigger: 'blur' }]
})

// 提交表单方法
const submitForm = (formEl) => {
  loginFormModel.loginButtonDisabled = true
  loginFormModel.loginButtonLoading = true
  loginFormModel.loginButtonName = '登录中...'
  formEl.validate((valid) => {
    if (valid) {
      const param = {
        ...loginFormModel,
        password: sm4Encrypt(loginFormModel.password)
      }
      userStore
        .loginRequest(param)
        .then(() => {
          vueRouter.push({ path: '/analysis' }).catch(() => {})
        })
        .catch(() => {
          // getVerifyCodeImgApi()
          loginFormModel.loginButtonDisabled = false
          loginFormModel.loginButtonLoading = false
          loginFormModel.loginButtonName = '登录'
        })
    } else {
      loginFormModel.loginButtonDisabled = false
      loginFormModel.loginButtonLoading = false
      loginFormModel.loginButtonName = '登录'
    }
  })
}

const getVerifyCodeImgApi = async () => {
  const { code, data: { img, uuid } } = await getVerifyCodeImg()
  if (code == '200') {
    loginFormModel.codeUrl = `data:image/gif;base64,${img}`
    loginFormModel.uuid = uuid
  }
}

if (import.meta.env.DEV) {
  loginFormModel.userName = 'admin'
  loginFormModel.password = '123456Aa'
}
// getVerifyCodeImgApi()
</script>

<template>
  <el-form ref="loginFormRef" :model="loginFormModel" :rules="loginFormRules">
    <el-form-item prop="userName">
      <el-input
        v-model="loginFormModel.userName"
        :prefix-icon="User"
        placeholder="请输入用户名/手机号/邮箱/身份证"
        clearable
      />
    </el-form-item>
    <el-form-item prop="password">
      <el-input
        v-model="loginFormModel.password"
        type="password"
        :prefix-icon="Lock"
        placeholder="请输入密码"
        clearable
        show-password
      />
    </el-form-item>
    <!-- <el-form-item prop="code">
      <div class="flex flex-grow">
        <el-input v-model="loginFormModel.code" placeholder="请输入验证码" clearable class="flex-grow" />
        <img :src="loginFormModel.codeUrl" @click="getVerifyCodeImgApi" alt="" class="code-img" />
      </div>
    </el-form-item> -->
    <div class="flex justify-center mt-6">
      <el-button
        type="primary"
        @click="submitForm(loginFormRef)"
        :disabled="loginFormModel.loginButtonDisabled"
        :loading="loginFormModel.loginButtonLoading"
      >
        {{ loginFormModel.loginButtonName }}
      </el-button>
    </div>
    <slot></slot>
  </el-form>
</template>

<style lang="scss" scoped>
.code-img {
  width: 106px;
  height: 40px;
  margin-left: 10px;
}
</style>
